<template>
  <div class="main">

    <div class="content">
      <div v-loading="loading" class="card left" ref="help" v-html="info.content"></div>
      <div class="right">
        <div class="sticky">
          <div class="title">Contents</div>
          <el-tree class="tree"
                   :data="trees"
                   default-expand-all
                   @node-click="handleNodeClick">
          <span slot-scope="{data}" :class=" ['normalBak', data.children.length == 0 ? 'blueBak' : '']">
            {{data.label}}
          </span>
          </el-tree>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import {getInfo} from "../api/help";

export default {
  name: "help",
  data() {
    return {
      info: {},
      trees: [],
      loading: false,
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    handleNodeClick(data) {
      if (data.children.length == 0) {
        this.goTracksView(data.name)
      }
    },
    goTracksView(id) {
      this.$nextTick(() => {
        // 实现滚动效果
        let top = document.documentElement.scrollTop
        let view = document.getElementById(id)
        if (!view) {
          return
        }

        document.getElementById(id).scrollIntoView();

        // let endY = view.offsetTop
        // if (endY >= top) {
        //   const timeTop = setInterval(() => {
        //     document.body.scrollTop = document.documentElement.scrollTop = top += 20
        //     if (top >= endY) {
        //       clearInterval(timeTop);
        //     }
        //   }, 3);
        // }else {
        //   const timeTop = setInterval(() => {
        //     document.body.scrollTop = document.documentElement.scrollTop = top -= 20
        //     if (top <= endY) {
        //       clearInterval(timeTop);
        //     }
        //   }, 3);
        // }
      })
    },
    getTitles() {
      let titls = []
      this.$nextTick(() => {
        let arr = Array.from(this.$refs.help.children)
        arr.forEach((n, i) => {
          let obj = {
            index: i,
            label: n.innerText,
            name: n.innerText.toLowerCase().replace(/ /g, "-"),
            children: [],
          }
          // 为标签添加跳转id 锚点
          n.setAttribute("id", obj.name)

          if (n.tagName.toLowerCase() === 'h1') {
            titls.push(obj)
          } else if (n.tagName.toLowerCase() === 'h2') {
            // 添加二级标题
            let lastH1 = titls[titls.length - 1]
            lastH1.children.push(obj)
          }
        })
        this.trees = [{
          index: -1,
          label: "User Guides",
          children: titls,
        }]
      })
    },
    async loadData() {
      this.loading = true
      const res = await getInfo()
      this.info = res.data

      this.getTitles()
      this.loading = false
    }
  }
}
</script>

<style lang="stylus" scoped>

.main {
  padding-top 50px
  padding-bottom 20px
  font-family Times New Roman
  background-color #fcfcfc
  width 100%

  .card {
    background-color #ffffff
    padding 30px
    box-shadow: 0 2px 12px 0 rgba(193, 193, 193, 0.39);
    border-radius 10px
  }

  .content {

    width 1170px
    margin 0 auto
    display flex
    position relative
    min-height 300px

    .left /deep/{
      width 900px // 防止内容超出边界，变形
      margin-right 30px

      //设置图标颜色
      .el-loading-spinner .path {
        stroke: #11427D!important;
      }

      html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, menu, nav, output, ruby, section, summary, time, mark, audio, video, input {
        font-size revert
        font-family revert
        margin: revert;
        padding: revert;
        border: revert;
        font-weight: revert;
        vertical-align: revert;
        box-sizing: revert;
      }

      img {
        max-width: 840px; // 防止内容超出边界，变形
      }
      p {
        line-height 1.5
      }

      li {
        list-style-type inherit
      }
    }

    .right  {
      width 240px

      .sticky {
        position sticky
        top 30px
        right 0
      }

      .title {
        font-size 20px
        margin-bottom 20px
      }
      .tree {
        background-color #fcfcfc!important
      }

      .normalBak {
        font-size 16px
        font-weight 600
      }
      .blueBak {
        color #11427d
      }
    }
  }
}

</style>
